<template>
  <form class="form2" autocomplete="off">
    <div class="password">
      <input type="password" placeholder="新密码" v-model="password" :class="{'inputError': passwordErrorMessage}" @input="reset_passwordError">
      <div class="passwordError">{{ passwordErrorMessage }}</div>
    </div>
    <div class="repassword" >
      <input type="password" placeholder="确认新密码" :class="{'inputError': errorMessage}" v-model="confirm_password" @input="reset_errorMessage">
      <div class="errorMessage">{{ errorMessage }}</div>
    </div>
    <div class="tips">*密码由8-16位数字、大写字母、小写字母组成</div>
  </form>
</template>

<script>
export default {
  computed: {
    // 新密码
    password: {
      get () {
        return this.$store.state.findPassword.password
      },
      set (val) {
        this.$store.commit('findPassword/set_password', val)
      }
    },
    // 确认新密码
    confirm_password: {
      get () {
        return this.$store.state.findPassword.confirm_password
      },
      set (val) {
        this.$store.commit('findPassword/set_confirm_password', val)
      }
    },
    // 新密码下方错误提示
    passwordErrorMessage () {
      return this.$store.state.findPassword.passwordErrorMessage
    },
    // 确认密码下方错误提示
    errorMessage () {
      return this.$store.state.findPassword.errorMessage
    }
  },
  methods: {
    // 重置新密码错误提示
    reset_passwordError () {
      if (this.passwordErrorMessage) {
        this.$store.commit('findPassword/set_passwordErrorMessage', '')
      }
    },
    // 重置错误提示
    reset_errorMessage () {
      if (this.errorMessage) {
        this.$store.commit('findPassword/set_errorMessage', '')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .form2{
    padding: 0 70px;
    input{
      width: 400px;
      height: 48px;
      border: 1px solid #d8dee9;
      border-radius: 2px;
      outline: none;
      padding-left: 16px;
      font-size: 16px;
      color: #0D172C;
      &::-webkit-input-placeholder{
        font-size: 16px;
        color: #9eaac4;
      }
    }
    .inputError {
      border-color: #FF2929;
    }
    .password{
      margin-bottom: 32px;
      position: relative;
      .passwordError {
        position: absolute;
        font-size: 12px;
        color: #ff2929;
        top: 53px
      }
    }
    .repassword{
      margin-bottom: 32px;
      position: relative;
      .errorMessage {
        position: absolute;
        font-size: 12px;
        color: #ff2929;
        top: 53px;
      }
    }
    .tips{
      height: 20px;
      font-size: 14px;
      font-weight: 400;
      text-align: left;
      color: #5f7196;
      line-height: 20px;
      margin-bottom: 16px;
    }
  }
</style>
